<template>
  <div>
    <div class="login_container">
      <div class="login_content">
        <div class="login_content_title">
          <h2>用户登录</h2>
        </div>
        <div class="login_content_input">
          <input type="text" placeholder="账号" v-model="name">
        </div>
        <div class="login_content_input">
          <input type="password" placeholder="密码" v-model="password">
        </div>
        <div class="login_content_input">
          <input type="text" placeholder="图片验证码" v-model="pic">
        </div>
        <div class="login_content_remeber">
          <input type="checkbox"> 记住密码
        </div>
        <div class="login_content_button">
          <button @click="onClick">登录</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: [],
      name: '',
      password: '',
      pic: ''
    }
  },
  mounted() {
    this.$message('账号密码验证码不为空即可！');
    var user = localStorage.user;
    if(user) {
      this.user = JSON.parse(localStorage.user)
    }
  },
  methods: {
    onClick() {
      if(this.name == '' || this.password == '' || this.pic == '') {
        this.$message({
          message: '账号或密码不能为空！',
          type: 'warning'
        });
        return
      }else {
        var user = {
          name: this.name,
          password: this.password,
          pic: this.pic
        }
        this.user.push(user)
        this.$message({
          message: '登陆成功！',
          type: 'success'
        });
        localStorage.user = JSON.stringify(this.user)
        this.$router.push('/')
      }
    }
  }
}
</script>

<style>
.login_container {
  width: 350px;
  height: 350px;
  padding: 30px 35px 15px;
  border: 1px solid #eee;
  margin: 100px auto;
  box-shadow: 0 0 20px 2px rgba(0,0,0,.1);
}
.login_content_title {
  color: #333;
  text-align: center;
}
.login_content_input input {
  width: 100%;
  height: 40px;
  color: #999;
  margin: 10px 0;
  border: 1px solid #999;
  text-indent: 10px;
  outline: none;
}
.login_content_remeber {
  color: #333;
}
.login_content_button button {
  width: 100%;
  height: 40px;
  background-color: #409eff;
  color: white;
  border: none;
  outline: none;
  border-radius: 4px;
  margin-top: 5px;
}
</style>